<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Extended Examples</TITLE>
     <link rel="stylesheet" type="text/css" href="../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<h1 align="center"><span class="pagetitle">CSS Examples</span><br>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../misc/email.htm">Brian Wilson</a> =</font></h1>

<div align="center">
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../index.html">Main Index</a> |
        <a href="../propindex/font.htm">Property Index</a> |
        <a href="../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>


<br>
<dl>
<dt><big><b class="mainheading">Introduction</b></big>
    <dd>There are four examples here using different style specification methods.
        Each method attempts to accomplish the same layout characteristics as
        the others, but there may be some differences (especially with the HTML
        only method.) I have tried to adhere to using only one method in each
        example, foregoing obvious opportunities where another method would
        work better, in order to prove the point of each example. As an author
        you can and probably will freely mix and match any of these methods for
        the result that best suits your needs.
</dl>

<br>
<dl>
<dt><big><b class="mainheading">Examples</b></big>
<dt>Each of the following examples consist of a document sample followed by
    a line-by-line breakdown analysis of the document code. Analysis points
    and line examples are heavily cross-linked to allow for easier navigation.
<dt><br>1. <a href="cssexternal.htm">External Style Sheet Example</a>
    <dd>Uses the <a href="http://www.blooberry.com/indexdot/html/tagpages/l/link.htm">LINK</a>
        <span class="external">[--&gt;Index DOT Html]</span>
        element to attach a CSS stylesheet to a document.
        Multiple HTML documents can use a single external style sheet, which
        serves to reduce repetitive work on pages using common thematic elements.
<dt>2. <a href="cssembedded.htm">Embedded Style Sheet Example</a>
    <dd>Uses the <a href="http://www.blooberry.com/indexdot/html/tagpages/s/style.htm">STYLE</a>
        <span class="external">[--&gt;Index DOT Html]</span>
        element to insert style information in a document.
        All style rules are applicable only to the document that contains them,
        but it also allows powerful grouping and classing mechanisms to save
        work in assigning style properties. This method is the middle ground
        between external and inline methods.
<dt>3. <a href="cssinline.htm">Inline Styles Example</a>
    <dd>Attaches style properties to documents by assigning them directly to
        HTML tags with the STYLE tag attribute. Can easily become repetitive,
        but is useful in some situations.
<dt>4. <a href="csshtmlxmp.htm">Plain HTML Example</a>
    <dd>What we all have been used to until the advent of CSS. Browser extensions
        and common browser visual behaviors are relied upon to create a consistent
        layout result - which was never the original intent of HTML to begin with.
</dl>

<br>
<dl>
<dt><big><b class="mainheading">Conclusion</b></big>
    <dd>Style sheets aim to accomplish several major things:
        <ul type=disc>
        <li>Separate style information from content
        <li>Increase the layout capabilities in the HTML document format
        <li>Make documents smaller, less complex, and easier to read
        <li>Promote the re-use of authoring efforts
        </ul>
    <dd>It is up to the author to decide how to best reach these goals, and
        achieving some of these goals may come at the cost of compromising others.
    <dd><br>I would love to add pages showing the results of these code examples
        above, but the big two browsers still do not support enough of the CSS
        specification to display the examples as expected. Actually, you would
        probably think the results are really quite ugly. I certainly do! =)
        These examples were designed to illustrate CSS syntax without thought
        for the final result. This just helps illustrate that without good design,
        all the potential CSS capabilities in the world will not save your page.
</dl>

<br><br>
<a href="../../misc/copyright.htm">Boring Copyright Stuff...</a>
<br>

</body>
</html>